<template>
  <div style="height:100%;">
    <div class="bgff p20 mb10" v-if="0">
      <city :citys="citys" :addr_this="addr_this" ref="city"></city>
      <el-button
        size="small"
        v-if="status == 1"
        type="primary"
        icon="el-icon-search"
        @click="serch"
      >搜索</el-button>
      <el-button size="small" v-if="status == 1" type="primary" @click="reset">重置</el-button>
      <el-button
        class="fr"
        v-if="status != 1"
        style="padding:6px 10px"
        @click="status = 1"
        type="primary"
      >返回</el-button>
    </div>
      <el-button
        class="lr"
        v-if="status != 1"
        style="padding:6px 10px;margin-bottom:20px;"
        @click="status = 1"
        type="primary"
      >返回</el-button>
    <el-row :gutter="20" v-if="status==1">
      <el-col :span="w" v-for="it in tableData" :key="it.id">
        <el-card class="mb20" shadow="hover">
          <div slot="header">
            <el-row>
              <el-col :span="8">
                <em>NO.{{it.id}}</em>
              </el-col>
              <el-col :span="12" class="pcub-te">{{it.name}}</el-col>
              <el-col :span="4" class="tx-c"></el-col>
            </el-row>
          </div>
          <div class="mb10 clear">
            <span class="fl el-button--text">设备数：{{it.equipments.length||'暂无'}}</span>
            <el-dropdown class="fr" v-if="it.equipments.length" @command="handleCommand">
              <span class="el-dropdown-link c-main pointer">
                {{it.command_item.name}}
                <i class="el-icon-arrow-down el-icon--right"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item
                  v-for="lt in it.equipments"
                  :key="lt.id"
                  :command="{p_item:it, cur_item:lt}"
                >{{lt.name}}</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div class="fz12" v-loading="it.loading" v-if="it.equipments.length>0">
            <datas :id="it.command_item.id"></datas>
            <div class="fz14 mt20 tx-r">
              <el-button @click="getNext(it, 2)" type="text">详情</el-button>
            </div>
          </div>
          <div class="fz12" v-else>
            <div style="height:146px;" class="tx-c">
              <img style="height:150px;" src="@/assets/nodata.png" alt />
            </div>
          </div>
        </el-card>
      </el-col>
      <div v-if="tableData.length==0">暂无设备</div>
    </el-row>
    <el-row :gutter="20" v-if="status==2" v-loading="loading">
      <el-col :span="w" v-for="it in eqmtList" :key="it.id">
        <el-card class="mb20" shadow="hover">
          <div slot="header">
            <el-row>
              <el-col :span="5">
                <em :class="line_status[it.status]"></em>
              </el-col>
              <el-col :span="12" class="pcub-te">{{it.name}}</el-col>
              <el-col :span="7" class="tx-c">
                <!-- <el-button @click="sendMQ(it)" type="text" style="color:red;"  v-if="it.switch_on==1">开闸</el-button>
                <el-button @click="sendMQ(it)" type="text" v-else>合闸</el-button>-->
                <toggle-switch :value="it.myswitch" :id="it.id" @change="toggleChange" :disabled="it.status==0"></toggle-switch>
              </el-col>
            </el-row>
          </div>

          <div class="fz12">
            <datas :id="it.id"></datas>
            <div class="fz14 mt20 tx-r">
              <el-button @click="detailClick(it)" type="text" size="small">更多信息</el-button>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import city from "@/components/city.vue";
import city from "@/components/citys/index.vue";
import ToggleSwitch from "@/components/switch";
import eqmt from "./eqmt.vue";
import datas from "@/view/equipment/modul/datas";
import { _mqttPub, _gatewaysList, _equipmentShow } from "@/http/ajax";
export default {
  components: { city, eqmt, datas, ToggleSwitch },
  name: "card",
  data() {
    return {
      addr_this: this,
      citys: {
        provinceId: "",
        cityId: "",
        districtId: ""
      },
      jd: "",
      w: 8,
      loading: false,
      status: 1,
      cut_data_index: 1,
      line_status: {
        2: "NOTIFICATION",
        1: "ONLINE",
        0: "OFFLINE"
      },
      tableData: [{ command_item: { name: "" }, equipments: [{ name: "" }] }],
      eqmtList: [],
      curPage: 1,
      size: 10,
      cur_gateway_index: 0,
      cur_equipment_current: {}
    };
  },
  created() {
    this.getList();
  },
  methods: {
    handleCommand({ p_item, cur_item }) {
      this.tableData.forEach((el, i) => {
        if (el.id === p_item.id) {
          this.tableData[i].command_item = {
            name: cur_item.name,
            id: cur_item.id
          };
          //  console.log(cur_item.id)
          //  console.log(this.$refs[`gate_datas_${cur_item.id}`])
          // const _this = this.$refs.gate_datas_
          // this.getEquipmentShow(cur_item.id, i);
        }
      });
    },
    getList() {
      let data = {
        size: this.size,
        page: this.curPage - 1
      };
      Object.keys(this.citys).forEach(key => {
        data[key] = this.citys[key];
      });
      this.tableData = [];
      _gatewaysList(
        data,
        res => {
          let arr = [];
          res.content.forEach(el => {
            el["command_item"] = {
              name: el.equipments[0] ? el.equipments[0].name : "",
              id: el.equipments[0] ? el.equipments[0].id : ""
            };
            el["loading"] = false;
            arr.push(el);
            // _equipmentShow(el.id, ress => {
            //   // this.cur_equipment_current = res.current
            // }, err => {
            //   console.log(err);
            // })
          });
          this.tableData = arr;
        },
        err => {}
      );
    },
    // 设备详情
    getEquipmentShow(id, i) {
      this.tableData[i].loading = true;
      _equipmentShow(
        id,
        res => {
          this.cur_equipment_current = res.current;
          setTimeout(() => {
            this.tableData[i].loading = false;
          }, 200);
        },
        err => {
          console.log(err);
        }
      );
    },
    getNext(item, status) {
      if (item.equipments.length) {
        this.eqmtList = item.equipments;
        this.eqmtList.forEach(el => {
          el["myswitch"] = el.switch_on == 1 ? true : false;
        });
        console.log(this.eqmtList);
        this.status = status;
      }
      this.cur_gateway_id = item.id;
    },
    detailClick(row) {
      let routeUrl = this.$router.resolve({
        path: `/eqmtShow/${row.id}`
        //   query: {id:row.id}
      });
      window.open(routeUrl.href, "_blank");
    },
    toggleChange(val) {
      console.log(val);
      this.eqmtList.forEach(el => {
        if (val.id === el.id) {
          this.sendMQ(el);
        }
      });
    },
    sendMQ(it) {
      let topic = `/eecc/recv/${it.imei}/raw`;
      let msg = it.switch_on == 1 ? 0 : 1;
      this.loading = true;
      _mqttPub(
        { clientid: it.imei, topic: topic, msg: msg, adr: it.adr || "" },
        data => {
          this.$message({
            type: "success",
            message: `操作成功`
          });
          this.reGetList();
        },
        err => {
          console.log(err);
        }
      );
      // let text = it.switch_on == 1 ? "开闸" : "合闸";
      // this.$alert(`确定${text}？`, "提示", {
      //   confirmButtonText: "确定",
      //   callback: action => {
      //     if (action === "confirm") {
      //       let topic = `/eecc/recv/${it.imei}/raw`;
      //       let msg = it.switch_on == 1 ? 0 : 1;
      //       this.loading = true;
      //       _mqttPub(
      //         { clientid: it.imei, topic: topic, msg: msg, adr: it.adr || "" },
      //         data => {
      //           this.$message({
      //             type: "success",
      //             message: `${text}成功`
      //           });
      //           this.reGetList();
      //         },
      //         err => {
      //           console.log(err);
      //         }
      //       );
      //     }
      //   }
      // });
    },
    // 开合闸 后重新拉取数据
    reGetList() {
      this.getList();
      let data = {
        size: this.size,
        page: this.curPage - 1
      };
      _gatewaysList(
        data,
        res => {
          res.content.forEach(el => {
            if (el.id == this.cur_gateway_id) {
              this.eqmtList = el.equipments;
              this.eqmtList.forEach(el => {
                el["myswitch"] = el.switch_on == 1 ? true : false;
              });
              console.log(this.eqmtList);
            }
          });
          this.status = 2;
          setTimeout(() => {
            this.loading = false;
          }, 200);
        },
        err => {}
      );
    },
    serch() {
      this.getList();
    },
    reset() {
      this.citys = {
        provinceId: "",
        cityId: "",
        districtId: ""
      };
      this.tableData = [];
      this.curPage = 1;
      this.size = 10;
      this.total = 0;
      const _this = this.$refs.city;
      _this.dataInit();
      this.getList();
    }
  }
};
</script>

<style lang="scss">
.el-row {
  margin-left: 0 !important;
  margin-right: 0 !important;
  .el-button--text {
    padding: 3px 0;
  }
}
.textbtn {
  color: #000;
}
.textbtn.on {
  color: #409eff;
}
.ONLINE {
  color: #67b91a;
}
.OFFLINE {
  color: #c8c9cc;
}
.NOTIFICATION {
  color: #ef3535;
}
.NOTIFICATION:before,
.OFFLINE:before,
.ONLINE:before {
  content: "●";
  margin-right: 5px;
}
.OFFLINE:after {
  content: "离线";
  font-size: 14px;
}
.ONLINE:after {
  content: "正常";
  font-size: 14px;
}
.NOTIFICATION:after {
  content: "报警";
  font-size: 14px;
}
</style>
